昨天介紹完
3. Arrow Function
4. Destructure assignment

今天再撐一下，剩下兩個小主題
5. Spread operator
6. Inheritance

Spread operator 展開運算子

把一個 陣列展開 ( expand ) 成 個別數值 的快速寫法

那功能有什麼呢 ?

1. 用於將 Array 做組合
   ( 過去如果想要組合成新Array => 使用concat )

   var array1 = [1,2,3,4,5];
   var array2 = [6,7,8];
   var array3 = array1.concat(array2);
   
   console.log(array3);
   output ==> [1,2,3,4,5,6,7,8]
   

   使用Spread operator可以省去很多時間
   用法：在要嵌入的array前加上 ...表示整個array

   var array4 = [...array2,9,10,...array1];
   
   console.log(array4);
   output ==> [6,7,8,9,10,1,2,3,4,5]
   

   優點很明顯 - 順序調整比 concat 方便太多

2. 將陣列內容獨立成參數

   先說說原本怎麼做：

   var array = [3,4,5];
   
   function sumarr(a,b,c){
       console.log(a+b+c);
   }
   sumarr(array[0],array[1],array[2]);
   
   output ==> 12
   

   再來，一樣用 spread operator 感受一下

   var array = [3,4,5];
   
   function sumarr(a,b,c){
       console.log(a+b+c);
   }
   sumarr(...array);
   
   output ==> 12
   

   會得到一樣的結果！
   或許這邊感覺不夠明顯，那就把資料變複雜比較看看吧 ~

Inheritance

想在JS中寫的跟物件語言 (Ex : C++) 一樣，沒問題
那我們先建立要用的class

• class 叫 Vehicle，constructor 傳 name 並有一個方法印出他在移動
• 用 Car extend，加上 sound 的 function 印出會發出 bababa 聲

​class Vehicle{
     constructor(name){
        this.name = name;
     }
     showaction(){
        console.log(`$(this.name) is moving`);
     }
}

class Car extend Vehicle{
     sound(){
        console.log(`$(this.name) bababa `};
}

Class成功寫好後，那就一樣來New他，建立物件!

const DY = new Car();
console.log(DY.name);
output==>DY

DY.showaction();
output==>DY is moving

DY.sound();
output==>DY bababa 

一個很簡短的範例，一樣的玩法下課後好好發揮囉 !
那我們的ES6幾個重要的功能就介紹到這邊
明天會是全新的內容哦 ~ 敬請期待 !

最後檢視今天學了什麼

• 使用 Spread constructor 展開
• 使用 JS 簡單玩繼承

下課囉 ~ 請鎖定 柚子放學後的網頁生活